<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          角色管理
          <el-button :icon="Plus" circle class="float-right" />
        </div>
      </template>
      <el-table :data="roleList.list" style="width: 100%">
        <el-table-column prop="roleId" label="角色代码" width="180" />
        <el-table-column prop="roleName" label="角色名称" />
        <el-table-column label="操作" align="center">
          <template #default>
            <el-button-group>
              <el-button size="small" type="warning">修改</el-button>
              <el-button size="small" type="danger">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";

import roleApi from "@/api/sys/RoleApi";

const roleList = reactive({}); //定义的响应式数据

/**
 * 定义可绑定的函数
 */
const getRoleList = () => {
  roleApi.list().then((r) => {
    console.debug(r);
    roleList.list = r.data.data;
  });
};

/**
 * 组件挂载事件
 */
onMounted(() => {
  getRoleList();
});
</script>

<style  scoped>
.box-card {
  width: 500px;
  margin: 1rem auto;
}
.float-right {
  float: right;
}
</style>